<!-- 主页 -->
<template>
  <view class="content">
    <!-- 自定义加载loading页面 v-if:true显示加载页面 false关闭加载页面 gifSrc:设置gif资源 -->
    <cc-gifLoading v-if="isloading"
      gifSrc="https://cdn.pixabay.com/animation/2023/05/02/04/29/04-29-03-511_512.gif"></cc-gifLoading>
    <div> <!-- 左上角用户小窗组件 -->
      <userAvatarBar></userAvatarBar>
      <text class="user_name" style="position: absolute; left: 20%; top: 8%; font-size: 25px;">Hi，{{userName}}！</text>
    </div>
    <div class="BBS"> <!-- 公告栏 -->
      <div class="image-swiperBox">
        <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
          <swiper-item v-for="(item , index) in imageAll" :key="index" @tap="redirectToExternalLink(item.link)">
            <image :src="item.URL" mode="aspectFill" style="height: 130px; width: 280px;"></image>
          </swiper-item>
        </swiper>
      </div>
      <text class="BBS_words">公告栏</text>
    </div>
    <div class="patitions_buttonArea"> <!-- 分区帖子按钮 -->
      <button class="patitions_button" @click="goToappointment()">
        <div>
          <image class="patitions_icon" src="http://s0v3kcpk7.hn-bkt.clouddn.com/static/icon/partitionButton/appointment.jpg" mode="aspectFill">
          </image>
          <text class="appointment_words">约 球</text>
        </div>
      </button>
      <button class="patitions_button" @click="goTotrade()">
        <div>
          <image class="patitions_icon" src="http://s0v3kcpk7.hn-bkt.clouddn.com/static/icon/partitionButton/trade.jpg" mode="aspectFill"></image>
          <text class="trade_words">装备交易</text>
        </div>
      </button>
      <button class="patitions_button" @click="goTocoach()">
        <div>
          <image class="patitions_icon" src="http://s0v3kcpk7.hn-bkt.clouddn.com/static/icon/partitionButton/coach.jpg" mode="aspectFill">
          </image>
          <text class="coach_words">教练陪练</text>
        </div>
      </button>
      <button class="patitions_button" @click="goTodaily()">
        <div>
          <image class="patitions_icon" src="http://s0v3kcpk7.hn-bkt.clouddn.com/static/icon/partitionButton/daily.jpg" mode="aspectFill">
          </image>
          <text class="daily_words">羽球人的日常</text>
        </div>
      </button>
    </div>
    <div> <!-- 热门帖子模块 -->
      <image src="/static/icon/post/hot.png" mode="aspectFill"
        style="height: 50px; width: 50px; position: absolute; left: 12%; top: 75%;"></image>
      <text style="font-size: 30px; position: absolute; left: 28%; top: 76%; color: #9a1403;">最新/热门帖</text>
      <!-- 约球热门帖 -->
      <div style="margin-top: 30%;">
        <div class="appointPost_List">
          <!-- 帖子用户头像名称 -->
          <div style="display: inline;">
            <button class="otheruser-icon" plain="true"
              @click="() => goToOwnSpace(postList1[0].userId, postList1[0].userName, postList1[0].iconUrl)">>
              <image :src="otheruserIcon1[0]" mode="aspectFill"
                style="height: 60px; width: 60px;  border-radius: 100%;">
              </image>
            </button>
            <text
              style="font-size: 15px; color: white; margin-top: 5%; position: absolute; top: 0%; left: 10%;">{{postList1[0].userName}}</text>
          </div>
          <!-- 帖子具体内容 -->
          <div>
            <!-- 左上角 -->
            <div class="appointText1">
              <text>时间：{{postList1[0].time}}</text>
              <text>地点：{{postList1[0].location}}</text>
              <text>人数：{{postList1[0].people}}</text>
              <text>类型：高手场 {{appointmentType[postList1[0].type]}}</text>
              <text>联系方式：{{postList1[0].contact}}</text>
              <text>发布时间：{{postcreatTime1[0]}}</text>
            </div>
            <!-- 右上角 -->
            <div class="appointText2">
              <text>{{postList1[0].name}}</text>
            </div>
            <div class="appointText3">
              <text>补充：{{postList1[0].content}}</text>
            </div>
          </div>
        </div>
      </div>
      <!-- 交易热门帖 -->
      <div style="margin-top: 5%;" @click="goTotradePostDetail()">
        <div class="tradePost_List">
          <!-- 帖子用户头像名称 -->
          <div style="display: inline;">
            <button class="otheruser-icon" plain="true"
              @click="() => goToOwnSpace(postList2[0].userId, postList2[0].userName, postList2[0].iconUrl)">>
              <image :src="otheruserIcon2[0]" mode="aspectFill"
                style="height: 60px; width: 60px;  border-radius: 100%;">
              </image>
            </button>
            <text
              style="font-size: 15px; color: white; margin-top: 5%; position: absolute; top: 0%; left: 10%;">{{postList2[0].userName}}</text>
          </div>
          <!-- 帖子具体内容 -->
          <div>
            <!-- 左上角 -->
            <div class="tradeText1">
              <text>{{postList2[0].name}}</text>
            </div>
            <!-- 右上角 -->
            <text class="tradeText2">装备类型：{{tradeType[postList2[0].type]}}</text>
            <image class="tradePicture" :src="tradePostPicture" mode="aspectFill">
            </image>
            <!-- 左下角 -->
            <div class="tradeText3">
              <text>预期价格：{{postList2[0].price}}</text>
              <text>联系方式：{{postList2[0].contact}}</text>
              <text>发布时间：{{postcreatTime2[0]}}</text>
            </div>
          </div>
        </div>
      </div>
      <!-- 陪教热门帖 -->
      <div style="margin-top: 5%;">
        <div class="coachPost_List">
          <!-- 帖子用户头像名称 -->
          <div style="display: inline;">
            <button class="otheruser-icon" plain="true"
              @click="() => goToOwnSpace(postList3[0].userId, postList3[0].userName, postList3[0].iconUrl)">>
              <image :src="otheruserIcon3[0]" mode="aspectFill"
                style="height: 60px; width: 60px;  border-radius: 100%;">
              </image>
            </button>
            <text
              style="font-size: 15px; color: white; margin-top: 5%; position: absolute; top: 0%; left: 10%;">{{postList3[0].userName}}</text>
          </div>
          <!-- 帖子具体内容 -->
          <div>
            <!-- 左上角 -->
            <div class="coachText1">
              <text>时间：{{postList3[0].time}}</text>
              <text>地点：{{postList3[0].location}}</text>
              <text>人数：{{postList3[0].people}}</text>
              <text>价格：{{postList3[0].price}}</text>
              <text>联系方式：{{postList3[0].contact}}</text>
              <text>发布时间：{{postcreatTime3[0]}}</text>
            </div>
            <!-- 右上角 -->
            <div class="coachText2">
              <text>类型：{{coachType[postList3[0].type]}}</text>
            </div>
            <div class="coachText3">
              <text>{{postList3[0].demand}}</text>
            </div>
            <div class="coachText4">
              <text>补充：{{postList3[0].content}}</text>
            </div>
          </div>
        </div>
      </div>
      <!-- 日常热门帖 -->
      <div style="margin-top: 5%;" @click="goTodailyPostDetail()">
        <div class="dailyPost_List">
          <!-- 帖子用户头像名称 -->
          <div style="display: inline;">
            <button class="otheruser-icon" plain="true"
              @click="() => goToOwnSpace(postList4[0].userId, postList4[0].userName, postList4[0].iconUrl)">
              <image :src="otheruserIcon4[0]" mode="aspectFill"
                style="height: 60px; width: 60px;  border-radius: 100%;">
              </image>
            </button>
            <text
              style="font-size: 15px; color: black; margin-top: 5%; position: absolute; top: 0%; left: 10%;">{{postList4[0].userName}}</text>
          </div>
          <!-- 帖子具体内容 -->
          <div>
            <!-- 右上角 -->
            <div class="dailyText1">
              <text>类型：{{dailyType[postList4[0].type]}}</text>
            </div>
            <!-- 内容 -->
            <div class="dailyText2">
              <text>{{postList4[0].content}}</text>
            </div>
            <div class="dailyText3">
              <text>发布时间：{{postcreatTime4[0]}}</text>
            </div>
            <div>
              <button class="dailyLike_Button" plain="true">
                <image src="/static/icon/post/like1.png" mode="aspectFill" style="height: 20px; width: 20px; ">
                </image>
              </button>
              <text class="dailyLike_Amount">{{postList4[0].likes}}</text>
            </div>
          </div>
        </div>
      </div>
    </div>
  </view>
</template>

<script>
  import userAvatarBar from '@/components/userAvatarBar/userAvatarBar.vue'

  export default {
    components: {
      userAvatarBar //左上角用户小窗组件
    },
    data() {
      return {
        tarId: '',
        tarName: '',
        chooseAvatar: '',
        imageAll: [ //轮播图
          {
            //羽协招新
            // URL: '/static/icon/BBS/BBS_1.png',
						URL: 'http://s0v3kcpk7.hn-bkt.clouddn.com/static/icon/BSS/BBS_1.png',
            link: 'https://mp.weixin.qq.com/s/gU6bTU8bkQ77lLcycMh_Kw'
          },
          {
            //羽协会员大会
            // URL: '/static/icon/BBS/BBS_2.png',
						URL: 'http://s0v3kcpk7.hn-bkt.clouddn.com/static/icon/BSS/BBS_2.png',
            link: 'https://mp.weixin.qq.com/s/dWV9eUfL9mCZy8mRXhAqRw'
          },
          {
            //数信院队招新
            // URL: '/static/icon/BBS/BBS_3.png',
						URL: 'http://s0v3kcpk7.hn-bkt.clouddn.com/static/icon/BSS/BBS_3.png',
            link: 'https://mp.weixin.qq.com/s/3dOFAeiy3Hggv9y40XkUQw'
          },
          {
            //单打赛对阵表
            // URL: '/static/icon/BBS/BBS_4.png',
						URL: 'http://s0v3kcpk7.hn-bkt.clouddn.com/static/icon/BSS/BBS_4.png',
            link: 'https://mp.weixin.qq.com/s/bTZG2NDmIG7koe5i2yw3Wg'
          }
        ],
        userName: wx.getStorageSync('nickName'),
        postList1: [], //约球热门帖
        postList2: [], //交易热门帖
        postList3: [], //陪教热门帖
        postList4: [], //日常热门帖
        appointmentType: ['男单', '男双', '女单', '女双', '混双'],
        coachType: ['找教练', '找陪练'],
        dailyType: ['日常分享', '技能提升', '吐槽'],
        tradeType: ['球拍', '装备', '羽毛球'],
        otheruserIcon1: [], //装热帖用户头像
        otheruserIcon2: [],
        otheruserIcon3: [],
        otheruserIcon4: [],
        postcreatTime1: [], //装热帖创建时间
        postcreatTime2: [],
        postcreatTime3: [],
        postcreatTime4: [],
        isloading: true
        // tradePostPicture: [] //装约球贴的图片
      }
    },
    mounted() {
      this.getAppointHotPost().then((res) => {
        this.postList1.push(res.data.data[0]) //将帖子保存进postList[0]
        this.otheruserIcon1.push('https://flyingfeather-1320611290.cos.ap-guangzhou.myqcloud.com/' + this.postList1[
          0].iconUrl);
        this.postcreatTime1.push(this.getTime(this.postList1[0].createTime));
      });
      this.getTradeHotPost().then((res) => {
        this.postList2.push(res.data.data) //将帖子保存进postList[0]
        this.otheruserIcon2.push('https://flyingfeather-1320611290.cos.ap-guangzhou.myqcloud.com/' + this.postList2[
          0].iconUrl);
        this.postcreatTime2.push(this.getTime(this.postList2[0].createTime));
      });

      this.getCoachHotPost().then((res) => {
        this.postList3.push(res.data.data) //将帖子保存进postList[0]
        this.otheruserIcon3.push('https://flyingfeather-1320611290.cos.ap-guangzhou.myqcloud.com/' + this.postList3[
          0].iconUrl);
        this.postcreatTime3.push(this.getTime(this.postList3[0].createTime));
      });
      this.getDailyHotPost().then((res) => {
        this.postList4.push(res.data.data) //将帖子保存进postList[0]
        this.otheruserIcon4.push('https://flyingfeather-1320611290.cos.ap-guangzhou.myqcloud.com/' + this.postList4[
          0].iconUrl);
        this.postcreatTime4.push(this.getTime(this.postList4[0].createTime));

      });
      setTimeout(() => { //用于推迟页面加载
        this.isloading = false;
      }, 1500);
    },
    onPullDownRefresh() { //刷新页面
      this.postList1 = [];
      this.postList2 = [];
      this.postList3 = [];
      this.postList4 = [];
      this.otheruserIcon1 = [];
      this.otheruserIcon2 = [];
      this.otheruserIcon3 = [];
      this.otheruserIcon4 = [];
      this.postcreatTime1 = [];
      this.postcreatTime2 = [];
      this.postcreatTime3 = [];
      this.postcreatTime4 = [];
      // this.tradePostPicture = [];
      this.getAppointHotPost().then((res) => {
        this.postList1.push(res.data.data[0]) //将帖子保存进postList[0]
        this.otheruserIcon1.push('/static/imgs' + this.postList1[0].icon);
        this.postcreatTime1.push(this.getTime(this.postList1[0].createTime));
      });
      this.getTradeHotPost().then((res) => {
        this.postList2.push(res.data.data) //将帖子保存进postList[0]
        this.otheruserIcon2.push('/static/imgs' + this.postList2[0].icon);
        this.postcreatTime2.push(this.getTime(this.postList2[0].createTime));
      });

      this.getCoachHotPost().then((res) => {
        this.postList3.push(res.data.data) //将帖子保存进postList[0]
        this.otheruserIcon3.push('/static/imgs' + this.postList3[0].icon);
        this.postcreatTime3.push(this.getTime(this.postList3[0].createTime));
      });
      this.getDailyHotPost().then((res) => {
        this.postList4.push(res.data.data) //将帖子保存进postList[0]
        this.otheruserIcon4.push('/static/imgs' + this.postList4[0].icon);
        this.postcreatTime4.push(this.getTime(this.postList4[0].createTime));
      });
      setTimeout(function() {
        uni.stopPullDownRefresh();
      }, 1000);
    },
    methods: {
      redirectToExternalLink(link) { //跳转公告栏推文
        wx.navigateTo({
          url: '/pages/webview/webview?url=' + encodeURIComponent(link),
          success: function(res) {
            console.log('跳转成功');
          },
          fail: function(err) {
            console.error('跳转失败', err);
          }
        });
      },
      goToappointment() {
        uni.navigateTo({
          url: '/pages/partition/appointmentPatition'
        })
      },
      goTotrade() {
        uni.navigateTo({
          url: '/pages/partition/tradePostarea'
        })
      },
      goTocoach() {
        uni.navigateTo({
          url: '/pages/partition/coachPostarea'
        })
      },
      goTodaily() {
        uni.navigateTo({
          url: '/pages/partition/dailyPostarea'
        })
      },
      getTime(time) { //转换时间戳
        var date = new Date(time);
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = date.getDate() + ' ';
        var Time = Y + M + D;
        return Time
      },

      // ⭐⭐⭐基于原生的封装
      request(options = {}) {
        //异步封装接口，使用Promise处理异步请求
        return new Promise((resolve, reject) => {
          // 发送请求
          uni.request({
            url: "https://www.horizons.wiki" + options.url || '', //接收请求的API
            method: options.method || 'GET', //接收请求的方式,如果不传默认为GET
            data: options.data || {}, //接收请求的data,不传默认为空
            header: {
              'Content-Type': 'application/json', //自定义请求头信息
              'Access-Control-Allow-Headers': 'appId',
              'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
              'Access-Control-Max-Age': 86400,
              'Authorization': '' + wx.getStorageSync('sessionID')
            },
          }).then(data => {
            let [err, res] = data;
            console.log(res)
            resolve(res);
          }).catch(error => {
            reject(error);
          })
        })
      },

      getAppointHotPost() {
        return this.request({
          url: '/blog/agreement/page/2/0', //后端对应的接口,如果前端配置了跨域，这里直接写http://xx:xx后面的内容
        })
      },
      getTradeHotPost() {
        return this.request({
          url: '/blog/hotBlog/1',
        })
      },
      getCoachHotPost() {
        return this.request({
          url: '/blog/hotBlog/2',
        })
      },
      getDailyHotPost() {
        return this.request({
          url: '/blog/hotBlog/0',
        })
      },
      goTotradePostDetail() { //进入交易帖子细节
        getApp().globalData.postDetail = []; //先清空
        getApp().globalData.postDetail.push(this.postList2[0]); //将当前帖子内容保存进全局变量postDetail数组里
        uni.navigateTo({
          url: '/pages/postDetail/tradePostDetail'
        })
      },
      goTodailyPostDetail() { //进入日常帖子细节
        getApp().globalData.postDetail = []; //先清空
        getApp().globalData.postDetail.push(this.postList4[0]); //将当前帖子内容保存进全局变量postDetail数组里
        uni.navigateTo({
          url: '/pages/postDetail/dailyPostDetail'
        })
      },
      goToOwnSpace(tarId, tarName, chooseAvatar) {
        getApp().globalData.chooseTarId = tarId;
        getApp().globalData.chooseTarName = tarName;
        getApp().globalData.chooseAvatar = 'https://flyingfeather-1320611290.cos.ap-guangzhou.myqcloud.com/' +
          chooseAvatar;
        uni.navigateTo({
          url: '/pagesA/ownspace/user-space'
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
  @import url("../../static/css/postStyle.scss");

  .content {
    background-image: url('http://s0v3kcpk7.hn-bkt.clouddn.com/static/background/background_1.jpg');
		/* 图片素材background_1.jpg */
    background-size: cover;
    background-attachment: fixed; //背景图片随页面滚动
    height: 235vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    /* 从上到下 */
    align-items: center;
    /* 水平居中 */
  }

  .BBS {
    margin-top: 25%;
    position: relative;
    background-color: #4b4b4b;
    border-radius: 15px;
    height: 200px;
    width: 300px;
    border: 1px solid #bbbbbb;
    text-align: center;

    .image-swiperBox {
      width: 100%;
      height: 100%;

      /* 轮播 */
      .swiper {
        position: absolute;
        top: 10px;
        left: 10px;
        height: 130px;
        width: 280px;
        border: 1px solid #bbbbbb;
      }
    }

    .BBS_words {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 2%;
      color: #FFBF6B;
      font-size: 35px;
    }
  }

  @mixin partition_wordsStyle() {
    position: absolute;
    right: 3%;
    margin: 0 auto;
    writing-mode: vertical-lr;
    color: #FFBF6B;
    font-size: 22px;
    line-height: 27px;
  }

  .patitions_buttonArea {
    position: relative;
    left: 9%;
    margin-top: 5px;

    .patitions_button {
      position: relative;
      background-color: #4b4b4b;
      border-radius: 10px;
      margin-bottom: 5px;
      margin-left: 3%;
      height: 85px;
      width: 140px;
      border: 1px solid #bbbbbb;
      display: inline-block;

      .patitions_icon {
        position: absolute;
        top: 4%;
        left: 2%;
        height: 75px;
        width: 75px;
        border-radius: 10%;
      }

      .appointment_words {
        @include partition_wordsStyle();
        right: 15%;
        top: 12%;
        font-size: 26px;
        line-height: 20px;
      }

      .trade_words,
      .coach_words {
        @include partition_wordsStyle();
        top: 8%;
        letter-spacing: 8px;
      }

      .daily_words {
        @include partition_wordsStyle();
        top: 3%;
        font-size: 18px;
        line-height: 27px;
        letter-spacing: 8px;
      }
    }
  }
</style>